<template>
  <a-form auto-label-width>
    <a-form-item label="富文本模式">
      <a-switch v-model="option.richText" />
    </a-form-item>
    <template v-if="option.richText">
      <a-button size="mini" long @click="isEdit = true">点击编辑</a-button>
    </template>
    <template v-else>
      <a-form-item label="文字">
        <a-textarea auto-size v-model="option.text" />
      </a-form-item>
      <a-form-item label="字体">
        <xiri-form v-model="option.fontFamily" option="fontChoose" />
      </a-form-item>
      <a-form-item label="颜色"> <xiri-form option="color" v-model="option.color" /> </a-form-item>
      <a-form-item label="字体大小">
        <a-input-number v-model="option.fontSize" />
      </a-form-item>
      <a-form-item label="间距">
        <a-input-number v-model="option.letterSpacing" />
      </a-form-item>
      <a-form-item label="对齐方式">
        <a-radio-group v-model="option.textAlign">
          <a-radio value="left">左对齐</a-radio>
          <a-radio value="center">居中</a-radio>
          <a-radio value="right">右对齐</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="class名">
        <a-textarea auto-size v-model="option.className" />
      </a-form-item>
    </template>
  </a-form>
  <a-drawer :visible="isEdit" width="60%" @cancel="isEdit = false" :footer="false">
    <div class="flex gap-3">
      <ma-editor v-model="option.content" :height="600" />
      <div class="w-4/6 border p-3">
        <a-divider orientation="center">时间变量</a-divider>
        <div class="grid grid-cols-2">
          <p v-for="(item, index) in date" :key="index">
            <a-typography-paragraph copyable> @{{ index }}@ </a-typography-paragraph>
          </p>
        </div>

        <a-divider orientation="center">数据变量</a-divider>
        <div class="grid grid-cols-2">
          <p v-for="item in fields" :key="item.fields">
            <a-typography-paragraph copyable> @{{ item.title }}@ </a-typography-paragraph>
          </p>
        </div>
      </div>
    </div>
  </a-drawer>
</template>
<script setup>
import XiriForm from "@cps/xiriForm.vue"
import { date, isEdit } from "./option.js"
import { currentComponent } from "@/hooks/userEditor.js"
const attrs = useAttrs()
const option = attrs.option
const fields = computed(() => {
  return [...currentComponent.value.data.dimension, ...currentComponent.value.data.measure]
})
</script>

<style scoped></style>
